<template>
    <div class="task-page">
        <el-card shadow="hover" style="margin-bottom: 20px;">
      <div>
        <p>简介： 前端框架应用项目开发</p>
        <p>课程目标：掌握前端框架在前端项目开发中的应用，熟悉当前市场主流的前端项目开发方法</p>
      </div>
    </el-card>
        <el-row>
        <el-col :span="24">
          <el-card v-for="task in tasks" :key="task.id" shadow="hover" style="margin-bottom: 20px;">
            <div style="display: flex; align-items: center; justify-content: space-between;">
              <h3>{{ task.name }}</h3>
            </div>
            <el-collapse :model-value="task.isExpanded">
              <el-collapse-item v-for="subtask in task.subtasks" :key="subtask.id" :title="subtask.name" @click="showSubtaskDetails(subtask)">
                <div>
                  <p>简介：{{ subtask.description }}</p>
                  <p>目标：{{ subtask.requirements }}</p>
                  <p>{{ subtask.xiangqing }}</p>
                </div>
              </el-collapse-item>
            </el-collapse>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </template>
  
  <script>
  import { ref } from 'vue';
  
  export default {
    setup() {
      const tasks = ref([
        {
          id: 1,
          name: '前端框架技术快速入门',
          isExpanded: ref(false),
          subtasks: [
            { id: 11, name: 'Vue3开发初体验', description: '参考官网教程，熟悉Vue3的各个知识点，使用Vue编写一个简单的todolist项目，并进行打包发布压缩上传。不能在线正常浏览网页效果者不得分！', requirements: '掌握Vue开发的基本流程。', xiangqing:'参考Vue官方教程https://cn.vuejs.org/guide/quick-start.html的指引，使用基于Vite工具搭建Vue3前端项目，输入命令：npm create vue@latest，熟悉Vue项目的目录结构和每个文件的作用，然后使用npm命令安装依赖，掌握利用npm运行和打包项目的基本命令，并将发布后的文件部署在本地的静态服务器上。查阅查阅官网教程资料，创建vue应用，练习“基础”章节里的所有内容，https://cn.vuejs.org/guide/essentials/application.html，并在其“演练场”中练习相关代码，熟悉Vue3的相关概念并深入了解各个基本知识点，熟悉计算属性，条件渲染，列表渲染，事件处理等基本知识点，掌握相关的示例代码。查阅掌握TypeScript的基本语法，熟悉其类型系统，https://www.runoob.com/typescript/ts-tutorial.html,展示最后，按照官网教程，综合运用数组，计算属性，条件渲染，列表渲染，事件处理，生命周期等知识点，自行编写一个简单的todolist示例项目，发布后压缩上交。', showDetails: ref(false) },
            { id: 12, name: 'Vue3组件化开发', description: '熟练掌握Vue3的组件化开发方法，将上一任务的todolist项目进行组件化拆分。，并进行打包发布压缩上传，不能在线正常浏览网页效果者不得分！', requirements: '掌握Vue3的组件化开发',xiangqing:'查阅官网资料，https://cn.vuejs.org/guide/components/registration.html，熟悉Vue3组件的定义和使用，并练习相关的示例代码。展示继续巩固Vue3的基本知识点，采用script setup的语法编写vue，深入理解组件的含义和使用方法，将上一任务的todolist项目进行组件化拆分，并加上CSS样式美化界面。在页面中列出定义的子组件目录结构和每个组件的属性和方法。将项目代码同步到你的gitee代码仓库，同时将仓库地址放置在首页顶部的链接中，方便评分者查看源码是否为组件化开发。', showDetails: ref(false) },
            {id:13,name:'Vue前端基础刷题',description:'完成Vue3前端相关知识的刷题练习',xiangqing:'完成刷题练习',showDetails:ref(false) },
          ],
        },
        {
          id: 2,
          name: 'Vue3的路由与状态管理',
          isExpanded: ref(false),
          subtasks: [
            { id: 21, name: 'Vue3路由的使用', description: '掌握vue-router的使用方法，定义多个页面组件。', requirements: '熟练掌握前端项目开发环境搭建和Vue项目的搭建，熟悉Vue项目的目录结构',xiangqing:'参考官网教程https://router.vuejs.org/zh/introduction.html，了解vue-router的使用方法查阅为todolist项目添加另外一个首页以及个人简介两个页面组件，为这两个页面添加路由。展示使用vue-router组织todolist项目的页面访问，注意必须使用hash模式，不然上交后将无法访问。', showDetails: ref(false) },
            { id: 22, name: '电影列表项目', description: '复习 Vue 的基本语法，结合组件化开发知识，同时使用Vue路由，完成一个电影列表的项目开发。要求：功能完整，界面美观。请评分者使用浏览器的手机模式浏览评分。', requirements: '* 内容输出指令：插值语法 {{}} | v-html | v-text * 条件指令：v-if | v-else-if | v-else * 列表渲染语法 v-for',xiangqing:'完成搜索界面初步制作，参考界面如下图。查阅使用 Vue 的组件化思维，完成下面页面的设计，至少拆分 2个组件， 导航组件 和 卡片组件查阅完成后发布打包，在本机自行测试功能，最终结果将在学习任务的最后一节里集成提交展示本任务作业汇总，完成所有任务并测试正确运行后，进行打包发布，将打包后的文件压缩上传，点击文件进行在线解压后，将可访问的链接地址复制到"设置链接"这里上交。记得点击保存。', showDetails: ref(false) },
            { id: 23, name: 'Vue自动化测试', description: '为Vue项目添加vue-test-utils，提供基于vitest的自动化测试服务', requirements: '修改之前的todolist的vue3项目，引入vue-test-utils环境和vitest环境https://cn.vitest.dev/guide/，掌握单元测试的基本方法，对Vue组件进行单元测试，并将单元测试结果截图，放到你的网页中。同时将结果上传到git仓库中。参考代码：https://gitee.com/sdptsoft/vue3_todolist.git查阅添加组件的单元测试，对新增一条TODO项目和删除一条TODO项目进行测试，以验证新增和删除是否成功，并将测试代码和测试结果的截图（将两张截图合并到一张jpg图中），保存备交。查阅添加新的组件的单元测试，对修改TODO项目和全部删除TODO项目进行测试，并将测试代码和测试结果的截图（将两张截图合并到一张jpg图中），保存备交。上传将以上两张截图逐一上传到此处（直接上传图片！不要压缩文件！），图片格式为jpg或png。', showDetails: ref(false) },
            { id: 24, name: '状态管理Pinia', description: '学习Vue3的状态管理Pinia的使用，完成用户登录的状态管理，同时将上一任务重的自动化测试截图放到其中的页面组件里。', xiangqing:'参考官方文档，https://pinia.web3doc.top/introduction.html，学习Pinia的基本知识点，在自己的Vue项目中使用Pinia。展示为之前的Todolist项目，添加用户登录功能，并将用户登录信息存储到Pinia的store中。同时将上一任务的自动化测试截图放到其中的一个页面组件里。添加路由守卫功能，不登录的用户不能访问todolist页面。', showDetails: ref(false) },
          ],
        },
        {
          id: 3,
          name: '开源组件的使用与开发',
          isExpanded: ref(false),
          subtasks: [
            { id: 31, name: '使用UI组件库', description: '学习国内最流行的Element Plus组件库，vant组件库等', requirements: '掌握应用DevOps进行前端开发的工具和手段',xiangqing:'学习Element Plus组件库的各种组件使用方法，参考官网教程https://element-plus.org/zh-CN/component/button.html，试验每一个组件的使用方法。运用Element Plus完善之前的TodoList项目，使其既能在PC端正常浏览，保存备交。查阅学习Vant组件库的各种组件使用方法，参考官网教程https://vant-contrib.gitee.io/vant/#/zh-CN/home，试验每一个组件的使用方法。运用vant完善之前的TodoList项目，使其可以在移动端正常浏览，展示1、融合上面的两个任务，让todolist可以跨端浏览，根据不同终端自动选择显示页面。', showDetails: ref(false) },
            { id: 32, name: 'common-list开源组件                    该任务只能组长提交', description: '介绍common-list开源组件的开发与使用，尝试自行开发npm组件。',xiangqing:'了解common-list开源组件的开发与使用，组件地址：https://www.npmjs.com/package/common-list展示1、使用common-list组件，参考数字化成长空间测试版http://test.codelover.club/ 中的用户注册登录、课程列列表和课程学习页面，以及使用网络请求API的用法，开发一个简易版的学习网站。', showDetails: ref(false) },
          ],
        },
        {
          id:4,
          name:'期末作业考核',
          isExpanded:ref(false),
          subtasks:[
            {id:41,name:'Vue综合项目              该任务只能组长提交',description:' 根据前面作业要求，完成一个完整版的todolist，或者电影频道项目。', requirements:'熟练掌握Vue3.4项目的开发与发布部署流程', xiangqing:'1、完成一个基于Vue3+vite的完整版博客网站，或者电影网站项目，或者在线课程学习网站（参考数字化成长空间测试版http://test.codelover.club/），或者是自行开发的其他项目（必须是个人开发，采用Vue3.4+vite），后端数据可以用本地json模拟或者使用mock服务器数据，也可以使用公共API（如数字化成长空间测试版）或自己开发的后端API。 ',showDetails:ref(false) },
          ]
        }
      ]);
  
      const showSubtaskDetails = (subtask) => {
        subtask.showDetails.value = !subtask.showDetails.value;
      };

  
      return {
        tasks,
        showSubtaskDetails,
      };
    },
  };
  </script>
  
  <style>
  .task-page {
    padding: 20px;
  }
  .is-expanded {
    transform: rotate(90deg);
  }
  </style>
  